<template>
  <view class="container">
    <view class="tab_nav">
      <nav-bar
        nav_btn="back"
        :index="index"
        @onPicker="getPicker"
        :title="title"
        :showPicker="showPicker"
        :color="color"
        :placeholder="placeholder"
        :list="list"
        :auto_img="image"
        :background="background"
      ></nav-bar>
    </view>
    <u-loading-page mode="flower" :show="loadingShow"></u-loading-page>
    <view class="box">
      <view class="boxItem">
        <view class="text1">
          {{ bonds }}
        </view>
        <view class="text2"> 充值保证金总金额 </view>
      </view>
      <view class="boxItem">
        <view class="text1">
          {{ cz_money }}
        </view>
        <view class="text2"> 已充值总额 </view>
      </view>
    </view>
    <view class="top">
      <view :class="tabId == 1 ? 'topItem borderLine' : 'topItem'" @click="changeTab(1)">消费记录</view>
      <view :class="tabId == 2 ? 'topItem borderLine' : 'topItem'" @click="changeTab(2)">会员充值金额</view>
    </view>
		<view class="list">
			<!-- 消费记录 -->
			<block v-if="tabId == 1">
				<view v-if="!saleList.length" style="padding-top: 30rpx">
				  <u-empty mode="list" text="暂无消费记录"></u-empty>
				</view>
				<block v-if="saleList.length">
					<view class="item" v-for="(item, index) in saleList" :key="index">
						<view class="box2">
							<view class="msg">消费日期：{{ item.updatetime | handleupdatetime }}</view>
							<view :class="item.status == 1 ? 'text1' : 'text'">{{item.status_text}}</view>
						</view>
						<view class="box2">
							<view class="msg">订单号 ：{{ item.order_no }}</view>
							<view class="error">- {{ item.balance_price }}</view>
						</view>
						<view class="box2" style="padding-top: 6rpx;">
							<view class="head">
								<image :src="item.avatar" class="avatar"></image>
								<view class="user">
									<view class="name">{{ item.nickname }}</view>
								</view>
							</view>
							<view class="tel">{{ item.mobile != null && item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1 $2 $3") }}</view>
						</view>
					</view>
				</block>
			</block>
			<!-- 会员充值金额 -->
      <block v-if="tabId == 2">
				<view v-if="!saleList.length" style="padding-top: 30rpx">
				  <u-empty mode="list" text="暂无充值记录"></u-empty>
				</view>
				<block v-if="saleList.length">
					<view class="merListItem" v-for="(item, index) in saleList" :key="index">
					  <view class="left">
					    <image class="avatar"
					      :src="item.avatar"
					      style="width: 84rpx; height: 84rpx; border-radius: 100%"
					    ></image>
					  </view>
					  <view class="center">
					    <view class="name">
					      {{ item.nickname }}
					    </view>
					    <view class="phone">
					      {{ item.mobile }}
					    </view>
					  </view>
					  <view class="right">
					    <view class="moeny">
					      + {{ item.balance }}
					    </view>
					  </view>
					</view>
				</block>
			</block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopId: 0,
      index: 0,
      list: [],
      showPicker: true,
      background: "#fff",
      image: "../static/tab_jian.png",
      color: "#000",
      flag: true, //用于记录是页面滚动加载还是顶部商铺切换
      tabId: 1,
      bonds: 0,
      cz_money: 0,
      pageNum: 1,
      saleList: [],
      lastPage: 0,
      loadingShow: false,
    };
  },
  filters: {
    handleupdatetime(val) {
      let valnum = Number(val) * 1000;
      let date = new Date(valnum);
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 > 10
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 10 ? date.getDate() : "0" + date.getDate();
      let hours =
        date.getHours() > 10 ? date.getHours() : "0" + date.getHours();
      let min =
        date.getMinutes() > 10 ? date.getMinutes() : "0" + date.getMinutes();
      let sec =
        date.getSeconds() > 10 ? date.getSeconds() : "0" + date.getSeconds();
      return `${year}-${month}-${day} ${hours}:${min}:${sec}`;
    },
  },
  onLoad(option) {
    this.getShopList();
    this.shopId = option.shopId;
    this.index = option.index;
  },
  onShow() {
    this.saleList = [];
    this.pageNum = 1;
    this.getDetailData();
  },
  onReachBottom() {
    this.flag = true;
    if (this.pageNum < this.lastPage) {
      this.pageNum++;
      this.getDetailData(this.tab);
    } else {
      this.$wanlshop.msg("我是有底线的");
    }
  },
  methods: {
    getShopList() {
      this.$request({
        url: "wedding/shop_list",
        method: "POST",
        data: {
          keyword: "",
          type: 1,
        },
      }).then((res) => {
        this.list = res.data.data;
      });
    },
    getPicker(e) {
      this.flag = false;
      this.shopId = this.list[e].id;
      this.index = e;
      uni.setStorageSync("shopId", this.list[e].id);
      this.getDetailData();
    },
    getDetailData(tab) {
      this.loadingShow = true;
      let tabId = "";
      if (tab) {
        tabId = tab;
      } else {
        tabId = this.tabId;
      }
      this.$request({
        url: "Manage/cz_detail",
        method: "post",
        data: {
          tab: tabId,
          shop_id: uni.getStorageSync("shopId"),
          page: this.pageNum,
        },
      })
        .then((res) => {
          const { code, data } = res.data;
          if (code == 1) {
            this.loadingShow = false;
            this.bonds = data.bonds;
            this.cz_money = data.cz_money;
            this.lastPage = data.list.last_page;
            this.pageNum = data.list.current_page;
            if (this.flag) {
              this.saleList = this.saleList.concat(data.list.data);
            } else {
              this.saleList = data.list.data;
            }
          }
        })
        .catch((e) => {
          this.loadingShow = false;
        });
    },
    changeTab(e) {
      this.tabId = e;
      this.saleList = [];
      this.pageNum = 1;
      this.getDetailData(e);
    },
  },
};
</script>

<style>
page {
  background-color: #f2f3f7;
}
</style>
<style lang="scss" scoped>

.container {
  width: 100%;
}
.box {
  width: 686rpx;
  height: 164rpx;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 20rpx;
  margin-top: 20rpx;
  display: flex;
  .boxItem {
    width: 50%;
    text-align: center;
    color: #333333;
    .text1 {
      font-size: 44rpx;
      padding-top: 34rpx;
    }
    .text2 {
      font-size: 24rpx;
      margin-top: 15rpx;
    }
  }
}
.top {
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	background-color: #fff;
	.topItem {
		width: 50%;
		text-align: center;
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
		color: #333;
	}
	.borderLine {
		border-bottom: 2px solid #999;
	}
}
.list {
  background-color: #fff;
  min-height: 88vh;
  max-height: 100%;
	padding: 32rpx;
  
	.item {
	  padding-bottom: 16rpx;
		margin-bottom: 30rpx;
	  border-bottom: 2rpx solid rgba(244, 245, 249, 1);
	  .box2 {
	    width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
	    .head {
	      display: flex;
	    	justify-content: space-between;
	    	align-items: center;
	    	.avatar{
	    		width: 58rpx;
	    		height: 58rpx;
	    		border-radius: 50%;
	    	}
	    	.user{
	    		padding-left: 20rpx;
	    	}
	    	.name{
	    		font-size: 26rpx;
	    		color: #999;
	    	}
	    }
			.tel{
				font-size: 26rpx;
				color: #999;
			}
			.msg{
				line-height: 36rpx;
				font-size: 26rpx;
				color: #333;
			}
			.text{
				font-size: 26rpx;
				color: #999;
			}
			.text1{
				font-size: 26rpx;
				color: #E92727;
			}
			.error{
				font-size: 30rpx;
				color: #FF3F4A;
			}
	    .btn {
	      width: 92rpx;
	      height: 52rpx;
	      border-radius: 8rpx;
	      background: linear-gradient(
	        154deg,
	        rgba(228, 183, 127, 1) 0%,
	        rgba(205, 156, 97, 1) 100%
	      );
	      color: #fff;
	      font-size: 26rpx;
	      text-align: center;
	      line-height: 52rpx;
	    }
	  }
	}

  .merListItem {
    display: flex;
    align-items: center;
    padding-bottom: 32rpx;
		margin-bottom: 30rpx;
    border-bottom: 2rpx solid #eee;
    .left {
      width: 100rpx;
    }
    .center {
			flex: 1;
      width: 45%;
      .name {
        font-size: 30rpx;
        color: #333333;
      }
      .phone {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #999999;
      }
    }
    .right {
			flex: 1;
      text-align: right;
      width: 47%;
      .moeny {
        font-weight: 400;
        font-size: 30rpx;
        color: #ff3f4a;
        font-family: PingFangSC, PingFang SC;
      }
    }
  }
}
</style>
